<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>京东</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <!-- app跳转开始 -->
    <div class="top-to-app">
      <div class="close">
        <img src="./images/close.png" />
      </div>
      <div class="logo">
        <img src="./images/logo1.png" />
      </div>
      <div class="open">打开京东App,购物更轻松</div>
      <div class="open-click">立即打开</div>
    </div>
    <!-- app跳转结束 -->
    <!-- 页面顶部开始 -->
    <header>
      <!-- 页面顶部登录区域开始 -->
      <div class="login">
        <div class="login-left">
          <img src="./images/s-btn.png" />
        </div>
        <div class="login-search">
          <!-- <div class="search-box"> -->
          <i class="JD"></i>
          <i class="search-icon"></i>
          <a href="#">办公椅</a>
          <!-- <input placeholder=""></input> -->
          <!-- </div> -->
          <!-- <input type="text" /> -->
        </div>
        <div class="login-right">登录</div>
      </div>
      <!-- 页面顶部登录区域结束 -->
    </header>
    <!-- 页面顶部结束 -->
    <!-- 页面主体内容开始 -->
    <main>
      <!-- 页面主体banner开始 -->
      <div class="banner">
        <div class="banner-bg"></div>
        <div class="banner-box">
          <ul class="banner-content">
            <li class="banner-item">
              <a href="#">
                <img src="./images/banner2.jpg" />
              </a>
            </li>
            <li class="banner-item">
              <a href="#">
                <img src="./images/banner3.jpg" />
              </a>
            </li>
            <li class="banner-item">
              <a href="#">
                <img src="./images/banner2.jpg" />
              </a>
            </li>
            <li class="banner-item">
              <a href="#">
                <img src="./images/banner2.jpg" />
              </a>
            </li>
          </ul>
          <ol class="banner-dot">
            <li class="dot-item"></li>
            <li class="dot-item current"></li>
            <li class="dot-item"></li>
            <li class="dot-item"></li>
            <li class="dot-item"></li>
            <li class="dot-item"></li>
            <li class="dot-item"></li>
          </ol>
        </div>
      </div>
      <!-- 页面主体banner结束 -->
      <!-- 页面广告区域开始 -->
      <div class="activity">
        <div class="activity-item">
          <a href="#">
            <img src="./images/banner_bottom_01.dpg" />
          </a>
        </div>
        <div class="activity-item">
          <a href="#">
            <img src="./images/banner_bottom_02.dpg" />
          </a>
        </div>
        <div class="activity-item">
          <a href="#">
            <img src="./images/banner_bottom_03.dpg" />
          </a>
        </div>
      </div>
      <!-- 页面广告区域结束 -->
      <!-- 页面导航nav区域开始 -->
      <ul class="nav">
        <li>
          <a href="#">
            <img src="./images/nav01.webp" />
            <p>京东超市</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav02.webp" />
            <p>数码电器</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav03.webp" />
            <p>京东服饰</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav04.webp" />
            <p>京东生鲜</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav05.webp" />
            <p>京东到家</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav01.webp" />
            <p>京东超市</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav01.webp" />
            <p>京东超市</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav01.webp" />
            <p>京东超市</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav01.webp" />
            <p>京东超市</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/nav01.webp" />
            <p>京东超市</p>
          </a>
        </li>
      </ul>
      <!-- 页面导航nav区域结束 -->
      <!-- 页面新人专享区域开始 -->
      <div class="new-people">
        <ul>
          <li>
            <a href="#"><img src="./images/new0.webp" /></a>
          </li>
          <li>
            <a href="#"><img src="./images/new1.dpg" /></a>
          </li>
          <li>
            <a href="#"><img src="./images/new2.dpg" /></a>
          </li>
        </ul>
      </div>
      <!-- 页面新人专享区域结束 -->
      <!-- 页面商品区域结束 -->
      <div class="goods">
        <div class="goods-item">
          <img class="goods-img" src="./images/goods.webp" />
          <p class="introduce">
            <img src="./images/goods-icon.png" class="goods-icon" />
            <span>ReFa AQUA GEL射频美颜仪用啫喱官配啫喱清爽保湿 </span>
          </p>
          <p class="price">
            <span>￥ 329</span>
            <span>看相似</span>
          </p>
        </div>
        <div class="goods-item">
          <img class="goods-img" src="./images/goods.webp" />
          <p class="introduce">
            <img src="./images/goods-icon.png" class="goods-icon" />
            <span>ReFa AQUA GEL射频美颜仪用啫喱官配啫喱清爽保湿 </span>
          </p>
          <p class="price">
            <span>￥ 329</span>
            <span>看相似</span>
          </p>
        </div>
        <div class="goods-item">
          <img class="goods-img" src="./images/goods.webp" />
          <p class="introduce">
            <img src="./images/goods-icon.png" class="goods-icon" />
            <span>ReFa AQUA GEL射频美颜仪用啫喱官配啫喱清爽保湿 </span>
          </p>
          <p class="price">
            <span>￥ 329</span>
            <span>看相似</span>
          </p>
        </div>
      </div>
      <!-- 页面商品区域结束 -->
    </main>
    <!-- 页面主体内容结束 -->
    <!-- 页面页脚开始 -->
    <footer>
      <!-- 页脚底部导航栏开始 -->
      <ul class="footer-nav">
        <li>
          <a href="#">
            <img src="./images/menu01.png" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/menu01.png" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/menu01.png" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/menu01.png" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="./images/menu01.png" />
          </a>
        </li>
      </ul>
      <!-- 页脚底部导航栏结束 -->
    </footer>
    <!-- 页面页脚结束 -->
  </body>
</html>
